<template>
	<!-- 头条快报 -->
	<view class="diy-special dis-flex flex-y-center">
		<!-- 图片 -->
		<form @submit="_onTargetIndex">
			<button formType="submit" class="btn-normal dis-flex">
				<view class="special-left">
					<image class="image" mode="widthFix" :src="itemStyle.image"></image>
				</view>
			</button>
		</form>
		<!-- 资讯轮播 -->
		<swiper :class="'special-content flex-box display_' + itemStyle.display" :autoplay="true" :interval="5000"
			duration="800" :circular="true" :vertical="true" :display-multiple-items="itemStyle.display">
			<swiper-item v-for="(item, index) in dataList" :key="index">
				<form @submit="_onTargetDetail(item.article_id)">
					<button formType="submit" class="btn-normal dis-flex">
						<view class="content-item onelist-hidden">
							<text>{{ item.article_title }}</text>
						</view>
					</button>
				</form>
			</swiper-item>
		</swiper>
		<!-- 更多资讯 -->
		<form @submit="_onTargetIndex">
			<button formType="submit" class="btn-normal dis-flex">
				<view class="special-more">
					<i class="iconfont icon-xiangyoujiantou"></i>
				</view>
			</button>
		</form>
	</view>
</template>

<script>
	const app = getApp();
	export default {
		data() {
			return {};
		},
		options: {
			addGlobalClass: true
		},
		/**
		 * 组件的属性列表
		 * 用于组件自定义设置
		 */
		props: {
			itemIndex: String,
			itemStyle: Object,
			params: Object,
			dataList: Array
		},
		/**
		 * 组件的方法列表
		 * 更新属性和数据的方法与更新页面数据的方法类似
		 */
		methods: {
			/**
			 * 跳转文章首页
			 */
			_onTargetIndex(e) {
				// 记录formid
				app.saveFormId(e.detail.formId);
				uni.navigateTo({
					url: '/pages/article/index'
				});
			},

			/**
			 * 跳转文章详情页
			 */
			_onTargetDetail(id) {
				uni.navigateTo({
					url: '/pages/article/detail/index?article_id=' + id
				});
			}
		}
	};
</script>
<style lang="scss">
	/* common.wxss */

	/* @import "../../../utils/common.scss"; */

	/* 头条快报 */

	.diy-special .special-left {
		padding: 10rpx 20rpx 10rpx 40rpx;
	}

	.diy-special .special-left .image {
		display: block;
		width: 96rpx;
		height: 100%;
	}

	.diy-special .special-content {
		/* width: 500rpx; */
		overflow: hidden;
	}

	.diy-special .special-content .content-item {
		padding: 3rpx 0;
		font-size: 26rpx;
		color: $uni-text-color-inverse;
		/* height: auto; */
	}

	.diy-special .special-content .content-item text {
		color: $uni-text-color-inverse;
	}

	.diy-special .special-content.display_1 {
		height: 44rpx;
	}

	.diy-special .special-content.display_2 {
		height: 88rpx;
	}

	.diy-special .special-more {
		padding: 24rpx 20rpx;
		font-size: 24rpx;
	}
</style>
